<template>

  <div class="center-cmp">
    <div class="cc-header">
      <dv-decoration-1 style="width:200px;height:50px;" />
      <div>小易系统概览</div>
      <dv-decoration-1 style="width:200px;height:50px;" />
    </div>

    <div class="cc-details">
      <div >在线人数</div>
      <div v-for="(item,index) in xy" :key="index" class="card">{{item}}</div>
    </div>
    <div class="cc-main-container">
    <div ref="tree" class="ccmc-middle"></div>
  </div>
  </div>
</template>

<script>
import { getGraphXyMetrics,getXyOnline } from "@/api/metrics"
export default {
  name: 'CenterCmp',
  components: {
  },
  data () {
    return {
      xy: '',
    }
  },
  mounted () {
    this.graphXy()
    this.xyonline()
    this.timerxyonline = setInterval(this.xyonline, 1000 * 60 * 10)
    this.timergraphXy = setInterval(this.graphXy, 1000 * 60 )
  },
  beforeDestroy () {
    clearInterval(this.timerxyonline)
    clearInterval(this.timergraphXy)
  },
  methods: {
    xyonline: function () {
      var labledata = []
      getXyOnline().then(res => {
          this.esvalues = res.data.xyOnline
          res.data.xyOnline.filter(item => {
            labledata.push(item.name)
            if (item.name === '小易系统') {
              this.xy = item.value.toString()
            }
          })
        })
        .catch(function (res) {
          console.log(res)
        })
    },
    graphXy: function () {
      this.tree = this.$echarts.init(this.$refs.tree)
      getGraphXyMetrics().then(res => {
          this.items = res.data.graphXyMetrics
          let [dataArr, allArr, erArr, sanArr] = [[], [], [], []]

          // 点
          var items = this.items
          items.forEach((el, ind) => {
            if (el.pointType === 'cloud') {
              // 云
              el.symbol = 'image://'
              el.symbolSize = [56, 35]
              el.label = {
                normal: {
                  show: true,
                  position: 'bottom',
                  borderWidth: 2,
                  borderRadius: 12,
                  padding: [4, 8, 4, 8],
                  distance: 10,
                  color: '#06baf1',
                  fontFamily: 'STSong',
                  borderColor: 'rgb(227,230,231)'
                }
              }
              erArr.push(el)
            } else if (el.pointType === 'point' && el.value <= 1 && el.name != "go-socket" && el.name != "go-wordfilter") {
              // 球
              el.itemStyle = {
                borderColor: el.pointColor ? el.pointColor : 'rgb(234,5,25)',
                borderWidth: 3,
                color: 'rgb(234,5,25)'
              }
              el.lineStyle = {
                color: 'rgb(234,5,25)'
              }
              // 清除没有父节点的值
              // sanArr.push(el);
              if (el.belong && !items.some((iteP) => el.belong === iteP.name)) {
                items.splice(ind, 1)
              } else {
                sanArr.push(el)
              }
            } else if (el.pointType === 'point' && el.value > 1 && el.value < 4) {
              // 球
              el.itemStyle = {
                borderColor: el.pointColor ? el.pointColor : 'rgb(239,201,7)',
                borderWidth: 4,
                color: 'rgb(239,201,7)'
              }
              el.lineStyle = {
                color: 'rgb(239,201,7)'
              }
              // 清除没有父节点的值
              // sanArr.push(el);
              if (el.belong && !items.some((iteP) => el.belong === iteP.name)) {
                items.splice(ind, 1)
              } else {
                sanArr.push(el)
              }
            } else if (el.pointType === 'point' && el.value >= 4) {
              // 球
              el.itemStyle = {
                borderColor: el.pointColor ? el.pointColor : '#09e848',
                borderWidth: 3,
                color: '#09e848'
              }
              // 清除没有父节点的值
              // sanArr.push(el);
              if (el.belong && !items.some((iteP) => el.belong === iteP.name)) {
                items.splice(ind, 1)
              } else {
                sanArr.push(el)
              }
            }
            if (!el.belong) {
              el.children = []
              items.forEach((es) => {
                if (es.belong === el.name) {
                  el.children.push(es)
                }
              })
              allArr.push(el)
            }
          })

          // 圆形分区
          function group (arr, r) {
            const newArray = []
            const { length: arLen } = arr
            arr.forEach((e, ind) => {
              // 按角度均匀分布
              const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1)
              const x = (Math.cos(ang * Math.PI / 180)).toFixed(2) * r
              const y = (Math.sin(ang * Math.PI / 180)).toFixed(2) * r
              e.value = [x.toFixed(2), y.toFixed(2)]
              if (e.belong) {
                let rotate = ''
                const angle = (160 / arr.length).toFixed(2)
                if (x > 0 && y >= 0) {
                  rotate = (r - angle * (ind)).toFixed(2)
                  // rotate = (90 - 360 / arr.length * (ind + 1)).toFixed(2);
                } else if (x <= 0 && y > 0) {
                  rotate = (-r + angle * (arr.length - ind)).toFixed(2)
                } else if (x < 0 && y <= 0) {
                  rotate = (r - angle * (ind - arr.length * 0.5)).toFixed(2)
                } else if (x >= 0 && y < 0) {
                  rotate = (-8 + angle * (arr.length * 0.25 - ind)).toFixed(2)
                }
                e.label = {
                  show: true,
                  width: 200,
                  color: {
                    lineColor: {
                      color: 'rgb(10,193,34)'
                    }
                  },
                  rotate,
                  align: x > 0 ? 'left' : 'right',
                  padding: x > 0 ? [0, 0, 0, 16] : [0, 16, 0, 0]
                }
              }
              newArray.push(e)
            })
            return newArray
          }
          // 线配置
          function linesConfig (arr) {
            const [dataArr, targetCoord] = [[], [0, 0]]
            arr.forEach((el) => {
              if (!el.belong) {
                dataArr.push([
                  { coord: targetCoord },
                  {
                    coord: el.value,
                    lineStyle: el.lineStyle,
                    effect: {
                      symbolSize: [4, 16], // 动画的大小
                      period: 6, // 时间快慢
                      delay: 2, // 延时计算
                      ...el.effect
                    }
                  }
                ])
                arr.forEach((element) => {
                  if (element.belong === el.name) {
                    dataArr.push([
                      { coord: el.value },
                      {
                        coord: element.value,
                        lineStyle: element.lineStyle,
                        effect: {
                          symbolSize: [4, 8], // 动画的大小
                          period: 6, // 时间快慢
                          delay: 2, // 延时计算
                          ...element.effect
                        }
                      }
                    ])
                  }
                })
              }
            })
            return dataArr
          }
          // 点分布
          erArr = group(erArr, 36)
          sanArr = group(sanArr, 50)
          allArr = [...erArr, ...sanArr]
          // 线坐标和配置
          dataArr = linesConfig(allArr)
          let option
          option = {
            xAxis: {
              show: false,
              type: 'value',
              max: 50,
              min: -51
            },
            grid: {
              top: 100,
              bottom: 100,
              left: 130,
              right: 130
            },
            yAxis: {
              show: false,
              type: 'value',
              max: 50,
              min: -50
            },
            series: [{
              type: 'graph',
              coordinateSystem: 'cartesian2d',
              z: 3,
              itemStyle: {
                normal: {
                  shadowColor: 'none'
                }
              },
              data: allArr
            },
            {
              name: '',
              type: 'lines',
              coordinateSystem: 'cartesian2d',
              polyline: true,
              z: 1,
              lineStyle: {
                width: 2,
                color: '#fff',
                curveness: 0
              },
              effect: {
                show: true,
                smooth: false,
                trailLength: 0, // 拖尾的长度
                symbol: 'pin' // 动画的类型
              },
              data: dataArr
            }
            ]
          }
          this.tree.setOption(option)
        })
        .catch(function (res) {
          console.log(res)
        })
    }
  }
}
</script>

<style lang="less">
.center-cmp {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .cc-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
  }

  .cc-details {
    height: 120px;
    display: flex;
    justify-content: center;
    font-size: 32px;
    align-items: center;

    .card {
      background-color: rgba(4,49,128,.6);
      color: #08e5ff;
      height: 70px;
      width: 70px;
      font-size: 45px;
      font-weight: bold;
      line-height: 70px;
      text-align: center;
      margin: 10px;
    }
  }

  .cc-main-container {
    position: relative;
    flex: 1;
    display: flex;

    .ccmc-middle {
      width: 100%;
      height: 100%;

      .active-ring-name {
        font-size: 20px !important;
      }
    }

    .ccmc-left, .ccmc-right {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 24px;

      span {
        font-size: 40px;
        font-weight: bold;
      }

      .station-info {
        height: 80px;
        display: flex;
        align-items: center;
      }
    }

    .ccmc-left {
      align-items: flex-end;

      span {
        margin-left: 20px;
      }
    }

    .ccmc-right {
      align-items: flex-start;

      span {
        margin-right: 20px;
      }
    }
  }

  .label-tag {
    position: absolute;
    width: 500px;
    height: 30px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
